<template>
	<view>

		<view class="indexBox" v-for="(item,key) in NoticeList" :key="key" @click="toDetails(item,key)">
			<view class="readed" v-if="item.isRead">已查看</view>

			<view class="flexbc" style="margin-top: 24rpx;">
				<view class="noticeTitle">
					<text>招募 {{ item.Roles }}</text>
					<text style="margin-left:0rpx">・</text>
					<text v-if="item.PriceType.value === 1">
						<text>¥</text>
						<text v-if="item.PriceQujian === 0">{{ item.Price|formatPrice }}</text>
						<text v-else>{{ item.StartPrice|formatPrice }} ~ {{ item.EndPrice|formatPrice }}</text>
						<text>{{ item.Unit.result }}</text>
					</text>
					<text v-else>{{ item.PriceType.result }}</text>
				</view>
				<view style="display: flex; align-items: center;">
					<fui-icon name="location" :size="28"></fui-icon>
					<text class="onCity">{{ item.City?item.City:'全国' }}</text>
				</view>
			</view>
			<view class="flexbc">
				<view class="leftTexts" style="margin-right: 10rpx;">
					<view class="noticeMemo">{{item.NoticeMemo}}</view>
					<view class="userlabel">
						<view>{{ item.ClassName }}</view>
						<view>性别要求：{{ item.SexLimit }}</view>
					</view>
					<view class="userInfo">
						<view class="userHeadPic">
							<image :src="item.WxHeadPic"></image>
						</view>
						<view class="userNicker">{{item.NickName}}</view>
						<!-- <view style="font-size: 20rpx;border-radius: 5rpx;background:linear-gradient(to bottom, #fb930a,#fda90b);color: #fff; padding: 2rpx 10rpx;margin-left: 10rpx;" v-if="item.isAuthOk == 2">认证</view> -->
						<!-- <image :src="baseUrl + 'icon/authed.png'" class="authed" v-if="item.isAuthOk == 1"></image> -->
						<view class="" v-if="item.UserLevelID == 1">
							<image src="/static/icon/authed1.png"
								style="width: 35rpx;height: 27rpx;margin-left: 10rpx;"></image>
						</view>

						<view style="position: relative;" v-if="item.UserLevelID == 2">
							<image src="/static/icon/authed.png" style="width: 35rpx;height: 27rpx;margin-left: 10rpx;">
							</image>
							<view
								style="font-size: 16rpx;position: absolute;right:0;bottom: 0;color: #ffaa00;font-weight: bold;">
								<text v-if="item.VipLavel == 1">1</text>
								<text v-if="item.VipLavel == 2">2</text>
								<text v-if="item.VipLavel == 3">3</text>
								<text v-if="item.VipLavel == 5">5</text>
								<text v-if="item.VipLavel == 6">6</text>
								<text v-if="item.VipLavel == 8">8</text>
							</view>
						</view>
						<ztAuthLabel v-if="item.isAuthOk == 2" :size="18" height="27"></ztAuthLabel>
						<ZtPersonalityLabel v-if="item.BeautifulWomen == 1" :size="18" height="27"></ZtPersonalityLabel>

						<image :src="baseUrl + 'icon/enterprise.png'"
							style="width: 35rpx;height: 35rpx;margin-left: 10rpx;"
							v-if="item.isCompanyAuth && item.isCompanyAuth == 1"></image>
					</view>
				</view>
				<view class="rightPic" v-if="item.NoticePics.length !== 0">
					<image :src="item.NoticePics[0]" mode="aspectFill"></image>
					<!-- <zero-lazy-load borderRadius="10" height="160" :image="item.NoticePics[0]" imgMode='aspectFill'></zero-lazy-load> -->
				</view>
			</view>
			<view class="indexBoxBottom flexbc">
				<view>
					{{ $common.timeDiff(item.addTime,new Date()) }}
				</view>
				<view class="indexBoxCount flexbc">
					<view class="getBaoming">
						<view style="float:left">
							<image src="/static/icon/mail.png" class="mailicon"></image>
						</view>
						<view style="float:left"><text>{{ item.BaomingCount }}</text></view>
					</view>
					<view class="readcount">
						<view style="float:left">
							<image src="/static/icon/show.png" class="showicon"></image>
						</view>
						<view style="float:left"><text>{{ item.ReadCount }}</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ztAuthLabel from "@/components/authLabel.vue";
	import ZtPersonalityLabel from "@/components/personalityLabel.vue";
	export default {
		components: {
			ztAuthLabel,
			ZtPersonalityLabel,
		},
		name: 'IndexNotice',
		filters: {
			formatPrice(price) {
				if (price > 10000) {
					return price / 10000 + 'w';
				} else if (price > 1000) {
					return price / 1000 + 'k'
				} else {
					return parseInt(price, 10);
				}
			}
		},
		props: {
			NoticeList: {
				type: [Object, Array],
				default: []
			}
		},
		data() {
			return {
				baseUrl: ''
			}
		},
		watch: {
			NoticeList: {
				handler: function(val, old) {
					console.log('组件内watch', val)
				},
				deep: true
			}
		},
		mounted() {
			this.baseUrl = this.$baseUrl;
			// console.log('组件内', this.NoticeList)
		},
		methods: {
			toDetails(item, index) {
				if (this.NoticeList[index].isRead == 0) {
					this.NoticeList[index].isRead = 1
					this.NoticeList[index].ReadCount += 1
				}
				this.$common.goNavPage('/notice/details?NoticeID=' + item.NoticeID)
			},
		},
	}
</script>

<style>
	.indexBox {
		margin: auto;
		margin-top: 20rpx;
		width: auto;
		height: auto;
		background-color: #FFF;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		position: relative;
	}

	.onCity {
		color: #999;
		margin-left: 10rpx;
		padding-bottom: 5rpx;
		font-size: 24rpx
	}

	.readed {
		font-size: 22rpx;
		color: #999;
		background-color: #dddddd;
		position: absolute;
		border-radius: 10rpx 0 10rpx 0;
		top: 0;
		left: 0;
		padding: 6rpx 10rpx;
	}

	.noticeTitle {
		font-size: 32rpx;
		color: #333;
		font-weight: bold
	}

	.noticeMemo {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #999;
	}

	.userlabel {
		display: flex;
		margin-top: 20rpx;
		/* justify-content:center; */
	}

	.userlabel view {
		background-color: #e0e0e0;
		color: #666;
		font-size: 18rpx;
		margin-right: 10rpx;
		border-radius: 4rpx;
		padding: 6rpx 10rpx 6rpx 10rpx;
	}

	.authed {
		width: 25rpx;
		height: 25rpx;
		margin-left: 10rpx
	}

	.mailicon {
		width: 25rpx;
		height: 25rpx;
		margin-right: 10rpx
	}

	.showicon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.userInfo {
		display: flex;
		margin-top: 20rpx;
		align-items: center;
	}

	.userHeadPic {
		width: 35rpx;
		height: 35rpx;
		background-color: #00cbff;
		border-radius: 35rpx;
	}

	.userHeadPic image {
		width: 35rpx;
		height: 35rpx;
		border-radius: 35rpx;
	}

	.userNicker {
		margin-left: 10rpx;
		font-size: 24rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 200rpx;
	}

	.rightPic {
		width: 160rpx;
		height: 160rpx;
		background-color: #CCC;
		// background-image: url('https://hbimg.huabanimg.com/e2f264f714b5e59a899535cb423bd1bd8498ef1e1184cb-eowWX4_fw658');
		background-size: cover;
		background-position: center;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}

	.rightPic image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}

	.indexBoxBottom {
		clear: both;
		margin-top: 20rpx;
		padding-top: 20rpx;
		// padding-bottom:20rpx;
		border-top: 1rpx solid #f0f0f0;
		color: #CCC;
		font-size: 24rpx
	}

	.indexBoxCount {
		width: 180rpx;
		font-size: 24rpx
	}

	.getBaoming {
		width: 120rpx;
		height: 30rpx;
		line-height: 30rpx;
	}

	.readcount {
		width: 100rpx;
		height: 30rpx;
		line-height: 30rpx;
	}
</style>